<template>
  <div>
    <Row class="search-info-style">
      <Col span="7">
        <span>社会组织名称：</span>
        <Input type="text" v-model="param.society_name" style="width:200px;"></Input>
      </Col>
      <Col span="6">
        <span>区域划分：</span>
        <Select v-model="param.recode" clearable style="width:200px" >
          <Option v-for="(item, key) in areaList" v-bind:key="key" :value="item.value">{{item.label}}</Option>
        </Select>
      </Col>
      <Col span="6">
        <span>预警：</span>
        <Select v-model="param.level" clearable style="width:200px">
          <Option value="1">一级</Option>
          <Option value="2">二级</Option>
          <Option value="3">三级</Option>
        </Select>
      </Col>
      <Button class="new-btn-sty" @click="searchData()" style="float:right">
        <Icon type="ios-search" /> 搜索
      </Button>
    </Row>
    <Row class="search-info-style">
      <Col span="7">
        <span>统一信用代码：</span>
        <Input type="text" v-model="param.credit_code" style="width:200px;"></Input>
      </Col>
      <Col span="6">
        <span>行业分类：</span>
        <Select v-model="param.society_type" clearable style="width:200px">
          <Option v-for="(item, index) in typeList" v-bind:key="index" :value="item.id">{{item.label}}</Option>
        </Select>
      </Col>
    </Row>
    <Table ref="selection" :columns="columns" :data="questionList" @on-selection-change="changeSelect" border>
      <template slot-scope="{row, index}" slot="state">
        <span v-if="row.state == '0'">未完成</span>
        <span v-if="row.state == '1'">已完成</span>
      </template>
      <template slot-scope="{row, index}" slot="action">
        <Button type="success" size="small" @click="finish(row)" style="margin-right:5px;">完成</Button>
        <Button type="info" size="small" @click="show(row)" style="margin-right:5px;">查看</Button>
        <Button type="error" size="small" @click="deletePerson(row)">删除</Button>
        <Button type="primary" size="small" v-if="row.state == '1'" @click="evaluate(row)">评价</Button>
      </template>
      </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Drawer title="人员分配信息" v-model="drawer1" width="720" :styles="styles">
      <Form :model="formData">
        <Row :gutter="32">
            <Col span="24">
                <FormItem label="姓名" label-position="top">
                    <Input readonly v-model="formData.person_name" />
                </FormItem>
            </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="联系方式" label-position="top">
                <Input readonly v-model="formData.phone" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="服务类型" label-position="top">
                <Input readonly v-model="formData.person_type" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="服务地址" label-position="top">
                <Input readonly v-model="formData.service_address" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="社会组织名称" label-position="top">
                <Input readonly v-model="formData.society_name" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="社会组织地址" label-position="top">
                <Input readonly v-model="formData.address" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawer1 = false">取消</Button>
        <Button type="primary" @click="drawer1 = false">确定</Button>
      </div>
    </Drawer>
    <Drawer title="完成服务信息" v-model="drawer2" width="720" :styles="styles">
      <Form :model="formData1">
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="完成时间" label-position="top">
              <DatePicker type="datetime" v-model="formData1.end_time" style="width:100%;" placeholder="选择完成时间"></DatePicker>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawer2 = false">取消</Button>
        <Button type="primary" @click="complete()">确定</Button>
      </div>
    </Drawer>
    <Drawer title="评价信息" v-model="drawer3" width="720" :styles="styles">
      <Form :model="formData2">
        <Row :gutter="32">
          <Col span="24">
            <FormItem label="评价分数" label-position="top">
              <InputNumber :min="0" :max="100" v-model="score" :active-change="false" style="width:100%;"></InputNumber>
              <!-- <Input type="number" :min="0" :max="10" v-model="formData2.score"></Input> -->
            </FormItem>
          </Col>
        </Row>
        <!-- <Row :gutter="32">
          <Col span="24">
            <FormItem label="评价描述" label-position="top">
              <Input type="textarea" row="3" v-model="formData2.score"></Input>
            </FormItem>
          </Col>
        </Row> -->
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="drawer3 = false">取消</Button>
        <Button type="primary" @click="complete2()">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import './index.less'
import { getDictList, datetime2str } from '@/api/eventlist'
import validateData from './validate'
import { societyPersonList, updateSocietyPerson, updateDelSocietyPerson, updateSocietyOrganizationPool } from '@/api/qstbV2'
export default {
  name: 'distribute_list',
  data () {
    return {
      score: null,
      formData1: {},
      end_time: '',
      areaList: validateData.areaList,
      loadData: false,
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: '65',
          fixed: 'left'

        },
        {
          title: '姓名',
          key: 'person_name',
          width: '80',
          align: 'center',
          fixed: 'left'
        },
        {
          title: '联系方式',
          key: 'phone',
          width: '100',
          align: 'center'
        },
        {
          title: '服务类型',
          key: 'person_type',
          width: '120',
          align: 'center'
        },
        {
          title: '服务地址',
          key: 'service_address',
          width: '220',
          align: 'center'
        },
        {
          title: '评分',
          key: 'score',
          width: '80',
          align: 'center'
        },
        {
          title: '社会组织名称',
          key: 'society_name',
          width: '220',
          align: 'center'
        },
        {
          title: '社会组织地址',
          key: 'address',
          width: '220',
          align: 'center'
        },
        {
          title: '状态',
          slot: 'state',
          width: '80',
          align: 'center'
        }
        // {
        //   title: '操作',
        //   slot: 'action',
        //   width: '140',
        //   align: 'center',
        //   fixed: 'right'
        // }
      ],
      dataList: [
        {
          title: '1'
        }
      ],
      formData: {},
      formData2: {},
      drawer1: false,
      drawer2: false,
      drawer3: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      },
      studySecond: 0,
      isTrue: true,
      param: {
        pageNo: 1,
        pageSize: 10
      },
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        totalnum: null
      },
      questionList: [], // 培训题列表
      systemList: [], // 系统类型
      typeList: [] // 行业分类
    }
  },
  components: {},
  computed: {},
  mounted () {
    this.init()
    this.getDictData()
  },
  methods: {
    show (item) { // 编辑
      console.log(item, '$$$$$$')
      this.formData = item
      this.drawer1 = true
    },
    complete () { // 学习完成
      let param = {
        id: this.formData1.id,
        state: '1',
        end_time: datetime2str(this.formData1.end_time)
      }
      if (confirm('确定社会组织完成了对该居民的服务？')) {
        updateSocietyPerson(param).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '操作成功'
            })
            this.drawer2 = false
            this.init()
            return
          }
          this.$Notice.error({
            title: '错误提示',
            desc: res.data.errmsg
          })
        })
      }
    },
    addData () {
      this.drawer1 = true
      this.formData = {}
    },
    init () { // 列表数据
      console.log('####')
      societyPersonList(this.param).then(res => {
        if (res.data.errcode === 0) {
          this.questionList = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    searchData () { // 搜索
      // this.searchInfo.pageNo = 1
      this.searchInfo.currentPageNo = 1
      this.param.pageNo = 1
      this.init()
    },
    changePageNo (pageNo, pageSize) {
      console.log(pageNo, pageSize)
      this.param.pageNo = pageNo
      this.init()
    },
    size (pageSize) {
      console.log(pageSize)
      this.param.pageSize = pageSize
      this.searchInfo.currentPageSize = pageSize
      // this.changePageNo(1)
    },
    transforData () { // 移入我的资源库
      societyOrganizationPoolMove({ ids: this.ids }).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '移入资源池成功'
          })
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    changeSelect (selection) {
      this.ids = []
      console.log(selection, '%%%%')
      selection.forEach(element => {
        this.ids.push(element.id)
      })
    },
    getDictData () { // 字典接口
      getDictList({ type: 'csc_society_type' }).then(res => {
        if (res.data.errcode === 0) {
          this.typeList = res.data.data.results
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    deletePerson (item) { // 删除人员分配信息
      if (confirm('确定删除改人员分配信息吗？')) {
        updateDelSocietyPerson({ ids: [item.id] }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '成功提示',
              desc: '删除成功'
            })
            this.init()
            return
          }
          this.$Notice.error({
            title: '错误提示',
            desc: res.data.errmsg
          })
        })
      }
    },
    evaluate (item) {
      this.formData2.society_id = item.society_id
      this.drawer3 = true
    },
    complete2 () { // 对完成服务的社会组织进行评价
      this.formData2.score = this.score
      updateSocietyOrganizationPool(this.formData2).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '成功提示',
            desc: '评价成功'
          })
          this.drawer3 = false
          this.init()
          return
        }
        this.$Notice.error({
          title: '错误提示',
          desc: res.data.errmsg
        })
      })
    },
    finish (item) {
      this.formData1.id = item.id
      this.drawer2 = true
    }
  }
}
</script>
